Icon buttons 圖示按鈕

1標準圖示按鈕 2 內含圖示按鈕(包括填充、色調填充和描邊樣式)

Filled icon button  填充圖示按鈕

1icon 2container

Filled icon button states填充圖示按鈕狀態

1 預設(Enabled)2 禁用(Disabled)3 懸停(Hovered)4 聚焦(Focused)5按下(Pressed)
A 未選中狀態(Unselected) B 選中狀態(Selected)
屬性數值
圖示尺寸24dp
容器尺寸40dp
點選目標區域48dp

色調填充圖示按鈕(Filled Tonal Icon Button)

色調填充圖示按鈕是一種特殊的按鈕型別。它比普通的填充按鈕看起來更輕柔,主要用於一些次要功能。這種設計讓使用者能夠輕鬆區分它和主要的填充按鈕。

1 icon 2 Container

Filled tonal icon button states填充色調圖示按鈕狀態

1 預設(Enabled)2 禁用(Disabled)3 懸停(Hovered)4 聚焦(Focused)5按下(Pressed)
A. 未選中狀態(Unselected)B. 選中狀態(Selected)
屬性數值
圖示尺寸24dp
容器尺寸40dp
點選目標區域48dp

輪廓圖示按鈕(Outlined Icon Button)

輪廓圖示按鈕是一種帶邊框的按鈕樣式,外觀比較簡單輕巧。這種按鈕主要用來展示不太重要的功能選項,和實心的填充式按鈕形成明顯區別。

Outlined icon button states輪廓圖示按鈕狀態

1 預設(Enabled)2 禁用(Disabled)3 懸停(Hovered)4 聚焦(Focused)5按下(Pressed)
A. 未選中狀態(Unselected)B. 選中狀態(Selected)
屬性數值
圖示尺寸24dp
容器尺寸40dp
點選目標區域48dp

Standard Icon Button 標準圖示按鈕

標準圖示按鈕僅由一個圖示(Icon)組成,適用於輕量級互動,如收藏、喜歡或分享。

Standard icon button states標準圖示按鈕狀態

1 預設(Enabled)2 禁用(Disabled)3 懸停(Hovered)4 聚焦(Focused)5按下(Pressed)
A. 未選中狀態(Unselected)B. 選中狀態(Selected)
屬性數值
圖示尺寸24dp
狀態層大小40dp
點選目標區域48dp